import React, { PureComponent } from "react"
import { CityWrap, TopContent } from "./styled"
import { Carousel } from 'antd-mobile';



export class TopArea extends PureComponent {

    render() {
        return this.props.indexTopData.slide_list ? (

            <div>
                <Carousel autoplay infinite>
                    {
                        this.props.indexTopData.slide_list.map((item, index) => (
                            <a
                                key={index}
                                href={item.url}
                                style={{ display: 'inline-block', width: '100%', height: '196px' }}
                            >
                                <img
                                    src={item.image_url}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top', height: '196px' }}
                                />
                            </a>
                        ))}
                </Carousel>

                <TopContent>
                    <div className="classify">
                        <ul>
                            {
                                this.props.indexTopData.classify_list.map((item, index) => (
                                    <li key={index}>
                                        <a href={item.url}>
                                            <img src={item.pic} alt="" />
                                            <p>{item.name}</p>
                                        </a>

                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                </TopContent>
            </div>

        ) : (null)
    }
}



export class City extends PureComponent {

    render() {
        return this.props.isCity ? (
            <button onClick={this.props.handleCity.bind(this)}>click</button>) : (
                <CityWrap>
                    <div className="left">
                        <ul>
                            {
                                this.props.cityList.map((item, index) => (
                                    <li key={index}> <h1>{item.id}</h1>
                                        <ul>
                                            {
                                                item.list.map((it, dex) => (
                                                    <li className="citys" key={dex} onClick={
                                                        this.props.handleCity.bind(this, it)
                                                    }>
                                                        {it.name}
                                                    </li>
                                                ))
                                            }
                                        </ul>
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className="right">
                        <ul>
                            {
                                this.props.cityList.map((item, index) => (
                                    <li key={index}>
                                        {item.id}
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                </CityWrap>
            )

    }
}

export class TourRecommend extends PureComponent {

    render() {
        return (
            <Carousel className="space-carousel"
                frameOverflow="visible"
                cellSpacing={10}
                slideWidth={0.8}
                autoplay
                infinite
                afterChange={index => this.setState({ slideIndex: index })}
                
            >
                {this.props.data.map((val, index) => (
                    <a
                        key={val}
                        href="http://www.alipay.com"
                        style={{
                            display: 'block',
                            position: 'relative',
                            top: this.state.slideIndex === index ? -10 : 0,
                            height: this.state.imgHeight,
                            boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
                            
                        }}
                    >
                        <img
                            src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                    </a>
                ))}
            </Carousel>

        )




    }
}



